<template>
	<view>
		
		<view v-if="starInfo.avg_userstars">
			<!-- 分数 -->
			<view class="flex justify-around padding bg-white solid-bottom">
				<view class="padding solid-right">
					<view >
						<text style="font-size: 75rpx;color: #0081FF;">
							{{ starInfo.avg_userstars }}
						</text>
						<text>
							分
						</text>
					</view>
					<view>
						<text class="text-gray" style="font-size: 25rpx;">
							来自{{ starInfo.dianpingNum }}位员工真实点评
						</text>
					</view>
				</view>
				<view>
					
					<view class="flex">
						<view>
							<text class="text-gary" style="font-size: 25rpx;">5星</text>
						</view>
						<view style="width: 250rpx;margin-left: 20rpx;">
							<view class="cu-progress round xs">
								<view class="bg-blue" :style="[{ width:starInfo.fiveStar + '%'}]"></view>
							</view>
						</view>
					</view>
					<view class="flex">
						<view>
							<text class="text-gary" style="font-size: 25rpx;">4星</text>
						</view>
						<view style="width: 250rpx;margin-left: 20rpx;">
							<view class="cu-progress round xs">
								<view class="bg-blue" :style="[{ width: starInfo.fourStar + '%'}]"></view>
							</view>
						</view>
					</view>
					<view class="flex">
						<view>
							<text class="text-gary" style="font-size: 25rpx;">3星</text>
						</view>
						<view style="width: 250rpx;margin-left: 20rpx;">
							<view class="cu-progress round xs">
								<view class="bg-blue" :style="[{ width:starInfo.threeStar + '%'}]"></view>
							</view>
						</view>
					</view>
					<view class="flex">
						<view>
							<text class="text-gary" style="font-size: 25rpx;">2星</text>
						</view>
						<view style="width: 250rpx;margin-left: 20rpx;">
							<view class="cu-progress round xs">
								<view class="bg-blue" :style="[{ width:starInfo.twoStar + '%'}]"></view>
							</view>
						</view>
					</view>
					<view class="flex">
						<view>
							<text class="text-gary" style="font-size: 25rpx;">1星</text>
						</view>
						<view style="width: 250rpx;margin-left: 20rpx;">
							<view class="cu-progress round xs">
								<view class="bg-blue" :style="[{ width:starInfo.oneStar + '%'}]"></view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<!-- 分类按钮 -->
			<view class="bg-white">
				<view class="solid-bottom">
					<view class="padding flex">
						<view>
							<view class="tab-item" :class="star == 0 ? 'active' : ''" @tap="changeStar(0)">
								全部({{ starInfo.dianpingNum }})
							</view>
							<view class="tab-item" :class="star == 5 ? 'active' : ''" @tap="changeStar(5)">
								强烈推荐({{ starInfo.mfiveStar }})
							</view>
							<view class="tab-item" :class="star == 4 ? 'active' : ''" @tap="changeStar(4)">
								推荐({{ starInfo.mfourStar }})
							</view>
							<view class="tab-item" :class="star == 3 ? 'active' : ''" @tap="changeStar(3)">
								一般({{ starInfo.mthreeStar }})
							</view>
							<view class="tab-item" :class="star == 2 ? 'active' : ''" @tap="changeStar(2)">
								不推荐去({{ starInfo.mtwoStar }})
							</view>
							<view class="tab-item" :class="star == 1 ? 'active' : ''" @tap="changeStar(1)">
								千万别去({{ starInfo.moneStar }})
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 评论列表 -->
			<view class="margin-top" v-for="(item,index) in remarks" :key="index" @tap="toDetail(item)">
				<view class="cu-card article no-card margin-top">
					<view class="cu-item shadow">
						<view class="padding flex align-center justify-between">
							<view class="flex align-center">
								<image
								style="width: 80rpx; height: 80rpx; border-radius: 50%;"
								src="https://www.newzhihu.com/mvue/image/userImg.png"
								mode="aspectFill"></image>
								<view style="margin-left: 30rpx;">
									<view class="text-cut">
										{{ item.username }}
									</view>
									<view class="text-gray" style="font-size: 25rpx;">
										{{ item.userinfo }}
									</view>
								</view>
							</view>
							<view class="rate" style="justify-item: end">
								{{ item.userstars }}
							</view>
						</view>
						<view class="content flex-direction">
							<view class="desc solid-bottom">
								<view class="text-content"> 
									<view class="text-black">
										{{ item.title }}
									</view>
									<view>
										{{ item.quesAsk }}
									</view>
								</view>
							</view>
							<view class="flex justify-between align-center" style="margin-top: 20rpx;">
								<view class="text-gray" style="font-size:25rpx">
									{{ item.publish_time }}
								</view>
								<view class="flex">
									<view style="margin-right: 20rpx;">
										<text class='cuIcon-mark text-gray'></text>
										<text class="text-gray" style="font-size: 25rpx;">
											{{ item.comNum }}
										</text>
									</view>
									<view style="margin-right: 20rpx;">
										<text class='cuIcon-like text-gray'></text>
										<text class="text-gray" style="font-size: 25rpx;">
											{{ item.allZan }}
										</text>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<VipMask></VipMask>
	</view>
</template>

<script>
	
	import VipMask from '../../../../components/VipMask.vue'
	
	export default{
		components: {
			VipMask
		},
		watch: {
			loading(newValue, oldValue) {
				if(newValue){
					uni.showLoading({
						title: '加载中'
					});
				}else{
					uni.hideLoading();
				}
			}
		},
		created() {
			let that = this
			setTimeout(function(){
				// 查看评分
				that.fatchStar()
				// 查看评论列表
				that.fatchRemarks()
			}, 50)
		},
		onReachBottom(){
			this.page += 1
			// 查看评论列表
			this.fatchRemarks()
		},
		data() {
			return {
				loading: false,
				starInfo: {},
				star: 0,
				page: 1,
				remarks: []
			}
		},
		props: {
			companyId: {
				type: String,
				default: ''
			},
		},
		methods: {
			toDetail(item){
				uni.navigateTo({
					url: '/pages/detail/function/remark/remark?remarkId=' + item.id
				})
			},
			async fatchStar(){
				this.loading = true
				let res = await this.$api.queryRemarkInfo({
					key: this.$util.getKey(),
					company_id: this.companyId,
					uid: this.$util.getUid()
				})
				this.loading = false
				if(res && res.data && res.data.data){
					this.starInfo = res.data.data
				}
			},
			changeStar(star){
				this.star = star
				this.fatchRemarks()
			},
			async fatchRemarks(){
				this.loading = true
				let res = await this.$api.queryRemark({
					key: this.$util.getKey(),
					company_id: this.companyId,
					page: this.page,
					uid: this.$util.getUid(),
					userStar: this.star
				})
				this.loading = false
				if(res && res.data && res.data.data){
					if(this.page == 1){
						this.remarks = res.data.data.commentList
					}else{
						this.remarks = this.remarks.concat(res.data.data.commentList)
					}
				}
			}
		},
	}
</script>

<style>
	.tab-item{
		font-size: 25rpx;
		background: #F6F6F6;
		color: #B2B2B2;
		padding: 5px 15px;
		float: left;
		margin: 5px 10px 5px 0;
		border-radius: 100px;
	}
	.active{
		background: #45A0ED!important;
		color: #fff!important;
	}
</style>
